<template>
    <tab-bar>
        <tab-bar-item link="/home" activeColor="red">
            <template v-slot:item-icon>
                <img src="~assets/img/tabbar/home.svg" alt="">
            </template>
            <template v-slot:item-icon-active>
                <img src="~assets/img/tabbar/home_active.svg" alt="">
            </template>
            <template v-slot:item-text>
                首页
            </template>
        </tab-bar-item>
        <tab-bar-item link="/category" activeColor="red">
            <template v-slot:item-icon>
                <img src="~assets/img/tabbar/category.svg" alt="">
            </template>
            <template v-slot:item-icon-active>
                <img src="~assets/img/tabbar/category_active.svg" alt="">
            </template>
            <template v-slot:item-text>
                分类
            </template>
        </tab-bar-item>
        <tab-bar-item link="/cart" activeColor="red">
            <template v-slot:item-icon>
                <img src="~assets/img/tabbar/shopcart.svg" alt="">
            </template>
            <template v-slot:item-icon-active>
                <img src="~assets/img/tabbar/shopcart_active.svg" alt="">
            </template>
            <template v-slot:item-text>
                购物车
            </template>
        </tab-bar-item>
        <tab-bar-item link="/profile" activeColor="red">
            <template v-slot:item-icon>
                <img src="~assets/img/tabbar/profile.svg" alt="">
            </template>
            <template v-slot:item-icon-active>
                <img src="~assets/img/tabbar/profile_active.svg" alt="">
            </template>
            <template v-slot:item-text>
                我的
            </template>
        </tab-bar-item>
    </tab-bar>
</template>

<script>
    import TabBar from "../../common/tabbar/TabBar";
    import TabBarItem from "../../common/tabbar/TabBarItem";

    export default {
        name: "MainTabBar",
        components: {
            TabBar,
            TabBarItem
        }
    }
</script>

<style scoped>
    .tab-bar-item img {
        height: 24px;
        width: 24px;
        margin-top: 3px;
        vertical-align: middle;
        margin-bottom: 2px;
    }
</style>